<template>
  <!--修改报价-->
  <el-dialog
    :close-on-click-modal="false"
    title="修改报价"
    :visible.sync="dialogVisible2"
    width="800px"
  >
    <div>
      <el-form
        size="mini"
        :model="sendForm2"
        label-width="120px"
        ref="lowPriceRef"
        :rules="rules"
      >
        <el-row>
           <el-col :span="12">
             <el-form-item label="报价价格："
             ><span>{{ purchasePrice1 }}</span></el-form-item
             >
           </el-col>
           <el-col :span="12">
             <el-form-item label="修改报价：" prop="purchasePrice"
             ><el-input
               v-model="sendForm2.purchasePrice"
               style="width: 150px"
               clearable
             ></el-input>
               <div v-if="sendForm2.purchasePrice>0
            &&( categoryMinPrice > 0 || categoryMaxPrice > 0 )
            && (sendForm2.purchasePrice < categoryMinPrice || sendForm2.purchasePrice > categoryMaxPrice)"
                    style="color: red;font-size:10px;">
                 未在产品线参考价格范围内
               </div>
             </el-form-item>
           </el-col>
          <el-col :span="12">
            <el-form-item label="采购成本价：" prop="costPrice">
              <el-input
                style="width: 150px"
                type="number"
                v-model="sendForm2.costPrice"
                clearable
              ></el-input>
              <div
                v-if="sendForm2.purchasePrice > 0 && sendForm2.costPrice > 0"
                style="color: red;font-size:12px;">
                采购吨毛利：{{ sendForm2.purchasePrice | fifterNumber(sendForm2.costPrice) }}
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发货方式：" prop="priceSendTypes">
              <el-radio-group v-model="sendForm2.priceSendTypes">
                <el-radio label="自提"></el-radio>
                <el-radio label="送到"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交易方式：" prop="pricePayTypes">
              <span>{{ pricePayTypes }}</span>
              <!-- <el-radio-group v-model="sendForm2.pricePayTypes">
                <el-radio label="承兑"></el-radio>
                <el-radio label="现汇"></el-radio>
              </el-radio-group> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发货类型：" prop="deliveryType">
              <el-select v-model="sendForm2.deliveryType" style="width: 100px">
                <el-option label="采购发货" value="采购发货"></el-option>
                <el-option label="客户自提" value="客户自提"></el-option>
                <el-option label="公司发货" value="公司发货"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="期望发货时间：">
              {{ receiveDate }}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="最晚发货时间：">
              {{ latestReceiveDate }}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="发货时间：" width="150" prop="sendDate">
              <el-date-picker
                :picker-options="pickerOptions1"
                v-model="sendForm2.sendDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报价是否公开:" width="150">
              <el-select  v-model="sendForm2.isShowPrice">
                <el-option :value="1" label="是"></el-option>
                <el-option :value="0" label="否"></el-option>
              </el-select>

            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注：" >
              <el-input
                style="width: 90%"
                :autosize="{ minRows: 2, maxRows: 6}" type="textarea"
                v-model="sendForm2.priceRemark"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <div>报价来源</div>

          <el-table
            :data="supplierPriceData"
            border
            size="mini"
            :header-cell-style="{ background: '#f8f8f9', color: '#80878f' }"
            style="width: 100%; margin-top: 20px"
            ref="table">
            <el-table-column align="center" label="报价时间" min-width="150">
              <template slot-scope="scope">
                {{scope.row.priceTime}}
              </template>
            </el-table-column>
            <el-table-column align="center" label="供应商" min-width="220">
              <template slot-scope="scope">
                  {{scope.row.supplierName}}
              </template>
            </el-table-column>

            <el-table-column label="价格" align="center" min-width="120" >
              <template slot-scope="scope">
                {{scope.row.supplierPrice}}
              </template>
            </el-table-column>
            <el-table-column label="报价类型" align="center" min-width="120" >
              <template slot-scope="scope">
                {{scope.row.priceType | fiftype}}
              </template>
            </el-table-column>
          </el-table>

      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose2">取 消</el-button>
      <el-button type="primary" @click="handleConfirm2" :loading="btnLoading2"
        >确认</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import { inquiryOperate,supplierPriceList } from "@/api/allInLine/inquiry";
import { mapGetters } from "vuex";
import { Message } from "element-ui";

const defaultSendForm2 = {
  inquiryId: "", //询价记录ID
  operateType: "editPrice",
  purchasePrice: "",
  costPrice: "",//采购成本价
  // pricePayTypes: "",
  priceSendTypes: "",
  deliveryType: "",
  sendDate: "",
  priceId: "",
  priceRemark:"",
  isShowPrice:1
};

export default {
  name: "lowPrice",
  data() {
    return {
      purchasePrice1:"",
      dialogVisible2: false,
      btnLoading2: false,
      sendForm2: JSON.parse(JSON.stringify(defaultSendForm2)),
      pricePayTypes:"",
      rules: {
        purchasePrice: [
          { required: true, message: "请输入修改报价的金额", trigger: "blur" },
        ],
        costPrice: [
          { required: true, message: "请输入采购成本价", trigger: "blur" },
        ],
        // pricePayTypes: [
        //   { required: true, message: "请选择交易方式", trigger: "change" },
        // ],
        priceSendTypes: [
          { required: true, message: "请选择发货方式", trigger: "change" },
        ],
        deliveryType: [
          { required: true, message: "请选择发货类型", trigger: "change" },
        ],
        sendDate: [
          { required: true, message: "请选择发货时间", trigger: "change" },
        ],
      },
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      receiveDate: "",
      latestReceiveDate: "",
      categoryMinPrice: "",
      categoryMaxPrice:"",
      supplierPriceData:[]
    };
  },
  computed: {
    ...mapGetters(["name", "mobile", "userId"]),
  },
  components: {},
  created() {},
  filters: {
    fifterNumber(val1, val2) {
      let newval1 = val1 ? val1 : 0;
      let newval2 = val2 ? val2 : 0;
      return (newval1 - newval2).toFixed(2)
    },
    fiftype(val){
      if(val === 0){
        return '采购员报价'
      }else if(val === 10){
        return '供应商报价'
      }else{
        return ''
      }
    },
  },
  methods: {
    getSupplierPriceList(){
      supplierPriceList({inquiryId:this.sendForm2.inquiryId}).then((res)=>{
        this.supplierPriceData = res.list
      })
    },
    //显示查看低价
    showPop2(item) {
      this.dialogVisible2 = true;
      this.sendForm2 = JSON.parse(JSON.stringify(defaultSendForm2));
      console.log(item)
      if (item) {
        this.purchasePrice1 = item.purchasePrice;
        this.sendForm2.inquiryId = item.inquiryId;
        this.sendForm2.costPrice = item.costPrice;
        this.sendForm2.priceSendTypes = item.priceSendTypes;
        this.sendForm2.isShowPrice = item.isShowPrice
        // this.sendForm2.pricePayTypes = item.pricePayTypes;
        this.pricePayTypes = item.pricePayTypes;
        this.sendForm2.deliveryType = item.deliveryType;
        this.sendForm2.sendDate = item.sendDate;
        this.sendForm2.priceId = item.priceId;
        this.sendForm2.priceRemark = item.priceRemark;
        this.receiveDate = item.receiveDate;
        this.latestReceiveDate = item.latestReceiveDate;
        this.categoryMinPrice = item.categoryMinPrice
        this.categoryMaxPrice=item.categoryMaxPrice
        this.getSupplierPriceList()
      }
    },
    //关闭查看低价
    handleClose2() {
      this.dialogVisible2 = false;
      this.$refs.lowPriceRef.resetFields();
    },

    //提交修改报价
    handleConfirm2() {
      this.$refs.lowPriceRef.validate((valid) => {
        if (valid) {
          this.btnLoading2 = true;
          const data = JSON.parse(JSON.stringify(this.sendForm2));
          inquiryOperate(data)
            .then((res) => {
               if (this.sendForm2.purchasePrice - this.sendForm2.costPrice <= -200) {
                this.$alert('您的报价中存在毛利过低', '提示', {
                  confirmButtonText: '关闭',
                });
              }
              this.$emit("update");
              Message.success("提交成功");
              this.dialogVisible2 = false;
              this.btnLoading2 = false;
            })
            .catch((err) => {
              this.btnLoading2 = false;
            });
        } else {
          return false;
        }
      })
    },
  },
};
</script>

<style  lang="scss">
</style>
